<template>
  <div class="track-container">
    <el-card class="track-search-card">
      <template #header>
        <div class="card-header">
          <h3>物流轨迹查询</h3>
        </div>
      </template>
      <div class="search-form">
        <el-form :model="searchForm" :inline="true">
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="searchForm.phone" placeholder="寄件人或收件人手机号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTrack" :loading="loading">
              <el-icon><Search /></el-icon> 查询
            </el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-empty v-if="!trackInfo.orderNumber" description="请输入订单号码或手机号码查询" />

    <div v-else class="track-content">
      <el-card class="track-info-card">
        <template #header>
          <div class="card-header">
            <h3>基本信息</h3>
          </div>
        </template>
        <div class="info-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="订单编号">{{ trackInfo.orderNumber }}</el-descriptions-item>
            <el-descriptions-item label="当前状态">
              <el-tag :type="getStatusTag(trackInfo.status)">{{ trackInfo.statusText }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="寄件人">{{ trackInfo.senderName }}</el-descriptions-item>
            <el-descriptions-item label="寄件人电话">{{ trackInfo.senderPhone }}</el-descriptions-item>
            <el-descriptions-item label="收件人">{{ trackInfo.recipientName }}</el-descriptions-item>
            <el-descriptions-item label="收件人电话">{{ trackInfo.recipientPhone }}</el-descriptions-item>
            <el-descriptions-item label="发件地点">{{ trackInfo.fromAddress }}</el-descriptions-item>
            <el-descriptions-item label="目的地点">{{ trackInfo.toAddress }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>

      <el-card class="track-timeline-card">
        <template #header>
          <div class="card-header">
            <h3>物流记录</h3>
            <el-button :icon="Refresh" circle plain @click="refreshTrack" :loading="loading" />
          </div>
        </template>
        <div class="timeline-content">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in trackInfo.activities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"
            >
              <h4>{{ activity.title }}</h4>
              <p>{{ activity.content }}</p>
              <div class="activity-details">
                <span class="location">地点：{{ activity.location }}</span>
                <span class="operator" v-if="activity.operator">操作员：{{ activity.operator }}</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  orderNumber: '',
  phone: ''
})

const loading = ref(false)

// 物流信息
const trackInfo = reactive({
  orderNumber: '',
  status: 0,
  statusText: '',
  senderName: '',
  senderPhone: '',
  recipientName: '',
  recipientPhone: '',
  fromAddress: '',
  toAddress: '',
  activities: [] as any[]
})

// 获取状态标签类型
const getStatusTag = (status: number) => {
  const statusMap: Record<number, string> = {
    0: 'info',
    1: 'primary',
    2: 'warning',
    3: 'success'
  }
  return statusMap[status] || 'info'
}

// 查询物流轨迹
const searchTrack = () => {
  if (!searchForm.orderNumber && !searchForm.phone) {
    ElMessage.warning('请至少输入订单编号或手机号码')
    return
  }

  loading.value = true
  
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据，实际项目中应该从API获取
    // 这里假设总是能找到数据
    trackInfo.orderNumber = searchForm.orderNumber || 'LG202405070001'
    trackInfo.status = 2
    trackInfo.statusText = '运输中'
    trackInfo.senderName = '张三'
    trackInfo.senderPhone = '13800138001'
    trackInfo.recipientName = '李四'
    trackInfo.recipientPhone = '13900139001'
    trackInfo.fromAddress = '上海市闵行区莘庄工业区'
    trackInfo.toAddress = '北京市海淀区中关村'
    
    // 模拟物流记录
    trackInfo.activities = [
      {
        time: '2024-05-07 08:30:25',
        title: '已揽件',
        content: '快递员已上门揽件，正在运往上海市闵行区分拣中心',
        location: '上海市闵行区莘庄工业区',
        operator: '快递员-张师傅',
        type: 'primary',
        color: '#409EFF',
        size: 'large',
        hollow: false
      },
      {
        time: '2024-05-07 10:15:37',
        title: '已到达',
        content: '快件已到达上海市闵行区分拣中心',
        location: '上海市闵行区分拣中心',
        operator: '分拣员-王经理',
        type: 'primary',
        color: '#409EFF',
        size: 'normal',
        hollow: false
      },
      {
        time: '2024-05-07 15:30:42',
        title: '已发出',
        content: '快件已从上海市闵行区分拣中心发出，正在运往北京市分拣中心',
        location: '上海市闵行区分拣中心',
        operator: '装运员-李师傅',
        type: 'primary',
        color: '#409EFF',
        size: 'normal',
        hollow: false
      },
      {
        time: '2024-05-08 02:15:18',
        title: '已到达',
        content: '快件已到达北京市分拣中心',
        location: '北京市顺义区分拣中心',
        operator: '分拣员-刘经理',
        type: 'warning',
        color: '#E6A23C',
        size: 'normal',
        hollow: false
      },
      {
        time: '2024-05-08 06:45:33',
        title: '已发出',
        content: '快件已从北京市分拣中心发出，正在运往北京市海淀区配送站',
        location: '北京市顺义区分拣中心',
        operator: '装运员-赵师傅',
        type: 'warning',
        color: '#E6A23C',
        size: 'normal',
        hollow: false
      },
      {
        time: '2024-05-08 09:20:55',
        title: '运输中',
        content: '快件已到达北京市海淀区配送站，正在安排配送',
        location: '北京市海淀区配送站',
        operator: '配送员-钱师傅',
        type: 'warning',
        color: '#E6A23C',
        size: 'normal',
        hollow: false
      }
    ]
    
    loading.value = false
  }, 800)
}

// 重置搜索
const resetSearch = () => {
  searchForm.orderNumber = ''
  searchForm.phone = ''
  
  // 清空轨迹信息
  trackInfo.orderNumber = ''
  trackInfo.activities = []
}

// 刷新轨迹信息
const refreshTrack = () => {
  if (!trackInfo.orderNumber) return
  
  loading.value = true
  
  // 实际项目中应该调用API重新获取数据
  setTimeout(() => {
    // 假设添加了一条新的轨迹记录
    if (trackInfo.activities.length === 6) {
      trackInfo.activities.unshift({
        time: new Date().toLocaleString(),
        title: '派送中',
        content: '快递员正在派送途中，请保持电话畅通',
        location: '北京市海淀区万柳配送点',
        operator: '配送员-钱师傅',
        type: 'success',
        color: '#67C23A',
        size: 'large',
        hollow: false
      })
      
      trackInfo.status = 2
      trackInfo.statusText = '派送中'
    }
    
    loading.value = false
    ElMessage.success('轨迹信息刷新成功')
  }, 600)
}
</script>

<style scoped>
.track-container {
  padding: 20px;
}

.track-search-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.track-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.track-info-card,
.track-timeline-card {
  width: 100%;
}

.timeline-content {
  padding: 10px;
}

.activity-details {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.location, .operator {
  display: flex;
  align-items: center;
}

/* 响应式处理 */
@media (min-width: 992px) {
  .track-content {
    grid-template-columns: 350px 1fr;
  }
}
</style> 